<toaster-container [toasterconfig]="config"></toaster-container>
<div class="wrap" style="overflow-y: auto; width:100vw;">
    <div class="container">
        <div class="clr-row animate fadeInDown">
            <div class="clr-col-md-8 clr-col-lg-6 text-center" style="width: 466px; margin: 0 auto;">

                <div class="anim-logo" (click)="toggleAnimation()">
                    <ng-container *ngIf="app.compilerVersion === 'DEFAULT'">

                        <ng-lottie
                                [options]="lottieConfig"
                                containerClass="display-animation"
                                (animationCreated)="handleAnimation($event)"
                                width="300px">
                        </ng-lottie>

                        <img alt="Logo SimplEOS" class="display-img"
                             src="./assets/simpleos-logo-clara.svg"
                             height="230" style="margin: 64px auto 50px auto;"/>

                    </ng-container>
                    <ng-container *ngIf="app.compilerVersion === 'LIBERLAND'">
                        <img alt="Logo Liberland"
                             src="./assets/logos/liberland_logo.PNG" height="210" style="margin: 50px auto;"/>
                    </ng-container>
                </div>

                <div class="slogan" *ngIf="app.compilerVersion === 'DEFAULT'">Your simple and secure EOSIO wallet</div>

                <div class="sloganWallet" *ngIf="app.compilerVersion === 'LIBERLAND'">LIBERLAND Wallet</div>
                <div class="slogan" *ngIf="app.compilerVersion === 'LIBERLAND'">To live and let live</div>

                <ng-container *ngIf="busy && network.status === ''">
                    <fa-layers class="mt-4 mb-4">
                        <fa-icon [icon]="['far', 'spinner']" [spin]="true" size="2x"></fa-icon>
                    </fa-layers>
                    <div>Connecting to the {{network.activeChain.name}} blockchain...</div>
                </ng-container>

                <ng-container *ngIf="busy && network.status === 'timeout'">
                    <div class="error mt-2">Couldn't connect to the blockchain, check your internet connection and try
                        again
                    </div>
                    <button (click)="retryConn()" class="btn btn-link btn-accent-link">
                        <fa-icon [icon]="['far', 'undo']"></fa-icon>
                        &nbsp;RETRY
                    </button>

                    <div class="clr-col-md-12">
                        <div class="card info-card">

                            <div class="card-header title card-title-color">
                                Connected to
                                <mat-form-field class="chain-selector example-full-width select-father"
                                                style="width: 240px;">
                                    <mat-select [value]="network.activeChain['id']"
                                                (selectionChange)="changeChain($event)">
                                        <mat-optgroup *ngFor="let group of network.selectGroup"
                                                      [label]="group.name">
                                            <mat-option *ngFor="let chain of group.chains" [value]="chain.id"
                                                        class="chain-option">
                                                <img [src]="'./assets/chain-icons/' + chain.icon" width="28"
                                                     height="28"
                                                     class="chain-icon"/>
                                                {{ chain.name }}
                                            </mat-option>
                                        </mat-optgroup>
                                    </mat-select>
                                </mat-form-field>
                            </div>

                            <div class="card-block">
                                <div class="clr-row" style="margin-left: 0; width: 100%;">
                                    <div fxLayout="row" fxLayoutAlign="start center" fxFlex="grow" fxLayoutGap="10px">
                                        <mat-form-field class="public-input" style="overflow: inherit;" fxFlex="grow">
                                            <input matInput type="text" placeholder="Endpoint" [(ngModel)]="endpoint">
                                        </mat-form-field>

                                        <button class="btn btn-info-outline" (click)="customConnect()" fxFlex="25"
                                                [disabled]="!endpoint" style="margin-right: 5px;">
                                            Connect
                                        </button>
                                    </div>

                                    <div style="margin-top: -15px; margin-bottom: 20px;">
                                        <a class="clicked highlight-primary" (click)="endpointModal=true;">
                                            ENDPOINT OPTIONS
                                        </a>
                                        <fa-icon [icon]="['far','question-circle']" class="highlight-primary"
                                                 style="font-size: 15px;"
                                                 [matTooltip]="'Having trouble connecting?' + '\n' +
                                                'Your connection is too slow?' + '\n' +
                                                'Connect to another endpoint'"
                                                 matTooltipClass="black-tooltip">
                                        </fa-icon>
                                    </div>

                                    <div fxLayout="row" fxLayoutAlign="start center" fxFlex="grow" fxLayoutGap="10px">
                                        <div class="text-left advanced error">Advanced Option:</div>
                                        <div>
                                            <a (click)="network.openCustomChainModal()"
                                               class="clicked highlight-primary">
                                                CUSTOM CHAIN
                                            </a>
                                            <fa-icon [icon]="['far','question-circle']" class="highlight-primary"
                                                     style="font-size: 15px;"
                                                     [matTooltip]="'Connect to a custom EOSIO chain.' + '\n' +
                                                        'Option generally used by developers.'"
                                                     matTooltipClass="black-tooltip">
                                            </fa-icon>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </ng-container>

                <ng-container *ngIf="!busy && network.networkingReady">

                    <div style="margin-top: 30px">

                        <div class="clr-row" style="justify-content: center;">
                            <div class="clr-col-md-12 clr-col-lg-6">
                                <button class="btn btn-inverse-outline btn-block" (click)="openImportModal()">
                                    Import existing key
                                </button>
                            </div>
                            <div class="clr-col-md-12 clr-col-lg-6"
                                 *ngIf="network.activeChain['name'] === 'EOS MAINNET'">
                                <button class="btn btn-inverse-outline btn-block"
                                        (click)="newWallet = true">
                                    Request New Account
                                </button>
                            </div>
                            <div class="clr-col-md-12 clr-col-lg-6">
                                <button class="btn btn-inverse-outline btn-block" (click)="importBKP = true">
                                    Import Backup
                                </button>
                            </div>
                            <div class="clr-col-md-12 clr-col-lg-6">
                                <button class="btn btn-inverse-outline btn-block" (click)="verifyPanel = !verifyPanel">
                                    Check Account
                                </button>
                            </div>
                            <div class="clr-col-md-12 clr-col-lg-6">
                                <button class="btn btn-inverse-outline btn-block" (click)="openKeyGenModal()">
                                    Generate Keys
                                </button>
                            </div>
                        </div>

                    </div>

                    <div class="card info-card" *ngIf="verifyPanel">

                        <div class="card-block">
                            <div>You can do a quick check of your account balance here</div>
                            <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
                                <mat-form-field class="public-input" fxFlex="grow">
                                    <input matInput type="text" placeholder="{{network.activeChain['name']}} Public key"
                                           [(ngModel)]="publicEOS" (keyup.enter)="checkAccount()">
                                    <mat-hint align="start">
                                        ctrl c + ctrl v to copy & paste
                                    </mat-hint>
                                </mat-form-field>
                                <div>
                                    <button class="btn btn-info-outline btn-check" (click)="checkAccount()"
                                            [disabled]="!publicEOS" style="margin-right: 0;">
                                        Check
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer highlight-primary" *ngIf="check">
                            <fa-icon [icon]="['far', 'spinner']" [spin]="true"></fa-icon>
                            <span> Checking...</span>
                        </div>

                        <ng-container *ngIf="checkerr === ''">
                            <div class="card-footer black-white" *ngFor="let account of accounts">
                                <span style="float: left;">
                                    Account:
									<span class="highlight-primary">
                                        {{account.name}}
                                    </span>
									- Balance:
									<span class="highlight-primary">
                                        {{account.fullBalance}} {{network.activeChain['symbol']}}
                                    </span>
								</span>
                            </div>
                        </ng-container>

                        <div class="card-footer" *ngIf="checkerr === 'invalid' && !check">
                            <span class="text-warn bold">Invalid public key</span>
                        </div>

                        <div class="card-footer" *ngIf="checkerr === 'no_account' && !check">
                            <span class="text-warn bold">No account found :(</span>
                        </div>

                    </div>

                    <div class="clr-row" style="justify-content: center;">
                        <div class="clr-col-md-12">
                            <div class="card info-card">
                                <div class="card-header title card-title-color">
                                    Connected to
                                    <mat-form-field class="chain-selector example-full-width select-father"
                                                    style="width: 240px;">
                                        <mat-select [value]="network.activeChain['id']"
                                                    [disabled]="network.isStarting"
                                                    (selectionChange)="changeChain($event)">
                                            <!--<fa-icon matSuffix [icon]="['fas', 'caret-down']"></fa-icon>-->
                                            <mat-optgroup *ngFor="let group of network.selectGroup"
                                                          [label]="group.name">
                                                <mat-option *ngFor="let chain of group.chains" [value]="chain.id"
                                                            class="chain-option">
                                                    <img [src]="'./assets/chain-icons/' + chain.icon" width="28"
                                                         height="28"
                                                         class="chain-icon"/>
                                                    {{ chain.name }}
                                                </mat-option>
                                            </mat-optgroup>
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                                <div class="card-block">
                                    <div class="clr-row" style="margin-left: 0; width: 100%;">

                                        <div class="text-left advanced warn">Advanced network Options:</div>
                                        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="grow"
                                             style="margin-top: 7px">
                                            <div>
                                                <a class="clicked highlight-primary" (click)="endpointModal=true;">
                                                    CHANGE ENDPOINT
                                                </a>
                                                <fa-icon [icon]="['far','question-circle']" class="highlight-primary"
                                                         style="font-size: 15px;"
                                                         [matTooltip]="'Having trouble connecting?' + '\n' +
                                                'Your connection is too slow?' + '\n' +
                                                'Connect to another endpoint'"
                                                         matTooltipClass="black-tooltip">
                                                </fa-icon>
                                            </div>
                                            <div>
                                                <a (click)="network.openCustomChainModal()"
                                                   class="clicked highlight-primary">
                                                    CUSTOM CHAIN
                                                </a>
                                                <fa-icon [icon]="['far','question-circle']" class="highlight-primary"
                                                         style="font-size: 15px;"
                                                         [matTooltip]="'Connect to a custom EOSIO chain.' + '\n' +
                                                        'Option generally used by developers.'"
                                                         matTooltipClass="black-tooltip">
                                                </fa-icon>
                                            </div>
                                        </div>
                                        <div class="clr-col-auto" *ngIf="!network.networkingReady.getValue()">
                                            <fa-layers class="mt-2 mb-1">
                                                <fa-icon [icon]="['far', 'spinner']" [spin]="true" size="2x"
                                                         class="highlight-primary"></fa-icon>
                                            </fa-layers>
                                        </div>
                                        <div class="clr-col my-auto" *ngIf="!network.networkingReady.getValue()"
                                             style="margin-top: auto; margin-bottom: auto; padding-top: 10px;">
                                            <span style="padding-left: 17px; font-size: 18px;"
                                                  class="highlight-primary">Connecting...</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                </ng-container>
                <section class="placeholder border-r text-on-cover" style="margin-top:10px;"
                         *ngIf="app.compilerVersion === 'DEFAULT'">
                    <div class="credits">Made with
                        <fa-icon [icon]="['fas', 'heart']"></fa-icon>
                        by <span
                                [ngClass]="aService.activeChain['name'] === 'TELOS MAINNET' ? 'highlight-accent' : 'highlight-primary'">
                            EOS Rio
                        </span>
                    </div>
                    <div class="version">v{{aService.versionSys}}</div>
                    <br>
                </section>
                <section class="placeholder border-r text-on-cover" style="margin-top:10px;"
                         *ngIf="app.compilerVersion === 'LIBERLAND'">
                    <span class="credits">Powered by </span>
                    <span class="version">SimplEOS v{{aService.versionSys}}</span>
                    <div (click)="ledgerwizard.open()" class="version" *ngIf="ledgerService.appReady">
                        Hardware Wallet Connected: {{ledgerService.deviceName}}
                    </div>
                    <br>
                </section>
            </div>
        </div>
    </div>
</div>

<!--IMPORT EXISTING WALLET-->
<app-import-modal></app-import-modal>
<!--IMPORT EXISTING WALLET END-->

<!--CREATE NEW WALLET START-->
<clr-wizard #wizardnew [(clrWizardOpen)]="newWallet" clrWizardSize="lg">
    <clr-wizard-title>Create new wallet</clr-wizard-title>
    <clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
    <clr-wizard-button [type]="'previous'">Back</clr-wizard-button>
    <clr-wizard-button [type]="'next'">Next</clr-wizard-button>
    <clr-wizard-button [type]="'finish'">Finish</clr-wizard-button>
    <clr-wizard-page>
        <ng-template clrPageTitle>Intro</ng-template>
        <h5 class="mt-0 highlight"><strong>Recommended if you don't have any EOS account
            yet.</strong>
        </h5>
        <h5>Create your eos account via a smart contract.</h5>
        <h5 class="highlight"><strong>How does it work?</strong></h5>
        <h5><span class="highlight-primary">1.</span> Send EOS from an exchange to our smart contract <a
                class="highlight-primary" (click)="openGit()" style="cursor: pointer;">eosriosignup</a>. This smart
            contract
            is open source and anyone can verify its contents.</h5>
        <h5><span class="highlight-primary">2.</span> Our smart contract will create the account for you. No
            fees.</h5>
        <h5><span class="highlight-primary">3.</span> After that, you can login in SimplEOS on the 'Import
            Existing Key' button!</h5>
        <h5 class="highlight"><strong>Frequently Asked Questions</strong></h5>
        <h5><strong><span class="highlight-primary">-</span> If the transfer fails, will my tokens be
            lost?</strong> No! If this fails the transaction won't happen and your tokens will stay on the exchange</h5>
        <h5><strong><span class="highlight-primary">-</span> How much does it cost to create an eos
            account?</strong> The price varies because it depends on the current RAM price</h5>
    </clr-wizard-page>

    <clr-wizard-page [clrWizardPageNextDisabled]="!accountname_valid"
                     [clrWizardPagePreventDefault]="true"
                     (clrWizardPageOnCommit)="verifyAccountName(true)"
                     (clrWizardPagePrevious)="wizardnew.previous()"
                     (clrWizardPageOnCancel)="resetAndClose()">
        <ng-template clrPageTitle>Account Name</ng-template>
        <h5>Choose your EOS account name</h5>
        <h5 class="mt-1">12 characters. Allows all letters and numbers 1-5</h5>
        <mat-form-field class="mt-3" style="display: block; width: 180px">
            <input matInput #account placeholder="EOS account name" maxlength="12" style="text-transform: lowercase;"
                   (keyup.enter)="verifyAccountName(false)"
                   [(ngModel)]="accountname">
            <mat-hint align="end">{{account.value.length}} / 12</mat-hint>
        </mat-form-field>
        <button class="btn btn-primary mt-3" (click)="verifyAccountName(false)">Check availability</button>
        <p class="error">{{accountname_err}}</p>
        <h5 *ngIf="account.value.length === 12 && accountname_valid" class="highlight-primary">
            <strong>{{accountname.toLowerCase()}}</strong>
            is currently available. Click
            <strong>NEXT</strong>
            to continue.
        </h5>
    </clr-wizard-page>

    <clr-wizard-page [clrWizardPageNextDisabled]="activepub === '' || ownerpub === '' || (generated?!agreeKeys:false)">
        <ng-template clrPageTitle>Define Keys</ng-template>
        <h5 class="bold highlight">At this point, we recommend you <span
                class="error">disconnet from the internet</span></h5>
        <h5>Selected account: <span class="highlight-primary">{{accountname.toLowerCase()}}</span></h5>
        <h5>Please enter your desired public keys or click the <span
                class="highlight-primary" (click)="generateKeys()"> Generate Key Pairs </span>
            button.</h5>
        <mat-form-field class="mt-3" style="width: 100%">
            <input matInput placeholder="Owner Public key" [(ngModel)]="ownerpub" style="font-family: 'SourceCodePro',monospace">
            <a matSuffix class="tooltip tooltip-xs tooltip-bottom-left">
                <fa-icon [icon]="['far', 'clone']" size="lg" class="copy"
                     (click)="cc(ownerpub, 'Key', 'Please save it on a safe place.')"></fa-icon>
                <span class="tooltip-content">Copy</span>
            </a>
            <mat-hint>ctrl c + ctrl v to copy & paste</mat-hint>
        </mat-form-field>
        <mat-form-field class="mt-3" style="width: 100%">
            <input matInput placeholder="Active Public key" [(ngModel)]="activepub" style="font-family: 'SourceCodePro',monospace">
            <a matSuffix class="tooltip tooltip-xs tooltip-bottom-left">
                <fa-icon [icon]="['far', 'clone']" size="lg" class="copy"
                     (click)="cc(activepub, 'Key', 'Please save it on a safe place.')"></fa-icon>
                <span class="tooltip-content">Copy</span>
            </a>
        </mat-form-field>

        <button class="btn btn-primary" (click)="generateKeys()">Generate Key Pairs</button>

        <fa-layers *ngIf="generating" class="highlight-primary fa-fw">
            <fa-icon [icon]="['far','spinner']" size="2x" [spin]="true"></fa-icon>
        </fa-layers>

        <ng-container *ngIf="generated">
            <mat-form-field class="mt-3" style="width: 100%">
                <input matInput placeholder="Owner Private key" [(ngModel)]="ownerpk" style="font-family: 'SourceCodePro',monospace">
                <a matSuffix class="tooltip tooltip-xs tooltip-bottom-left">
                    <fa-icon [icon]="['far', 'clone']" size="lg" class="copy"
                         (click)="cc(ownerpk, 'Key', 'Please save it on a safe place.')"></fa-icon>
                    <span class="tooltip-content">Copy</span>
                </a>
            </mat-form-field>
            <mat-form-field class="mt-2" style="width: 100%">
                <input matInput placeholder="Active Private key" [(ngModel)]="activepk" style="font-family: 'SourceCodePro',monospace">
                <a matSuffix class="tooltip tooltip-xs tooltip-bottom-left">
                    <fa-icon [icon]="['far', 'clone']" size="lg" class="copy"
                         (click)="cc(activepk, 'Key', 'Please save it on a safe place.')"></fa-icon>
                    <span class="tooltip-content">Copy</span>
                </a>
            </mat-form-field>
            <mat-checkbox [(ngModel)]="agreeKeys">I have saved all my keys in a safe place</mat-checkbox>
        </ng-container>
    </clr-wizard-page>
    <clr-wizard-page>
        <ng-template clrPageTitle>Account Resources</ng-template>

        <h5>In eos, creation of new accounts costs a small amount of eos to allocate the
            necessary resources to the account.</h5>
        <h5>The amount you will need to transfer will be as shown below:</h5>
        <div class="black-white" style="margin-top: 15px"><strong>Amount to CPU:</strong><span
                class="highlight-primary"> 0.75 EOS</span>
        </div>
        <div><strong>Amount to NET:</strong><span class="highlight-primary"> 0.25 EOS</span></div>
        <div><strong>Amount of RAM:</strong><span> 4096 bytes</span>
            <span style="margin: 0 12px;">=</span>
            <span class="highlight-primary">{{(ram.ramPriceEOS * (4096 / 1024)) * 1.05 | number: '1.0-4'}} EOS</span>
        </div>
        <div><strong>Safety margin:</strong><span
                class="highlight-primary"> 0.25 EOS (in case RAM price changes)</span>
        </div>
        <div style="border-bottom: 1px solid #0079b8; margin: 10px 0;"></div>
        <div><strong>Total Amount:</strong><span
                class="highlight-primary"> {{1.25 + (ram.ramPriceEOS * (4096 / 1024)) * 1.05 | number: '1.0-4'}}
            EOS</span></div>
        <div style="margin-top: 5px;">*If you transfer more than this amount the difference will remain
            as liquid tokens in your new account
        </div>
    </clr-wizard-page>
    <clr-wizard-page (clrWizardPageOnLoad)="makePayload(); makeMemo();">
        <ng-template clrPageTitle>
            <ng-container *ngIf="!relayMethod">
                Payment
            </ng-container>
            <ng-container *ngIf="relayMethod">
                <span class="highlight-primary" style="font-weight: 500">Alternative Method</span>
            </ng-container>
            &nbsp;
        </ng-template>
        <ng-container *ngIf="!relayMethod">

            <h5 class="highlight">Great! Now follow the steps:</h5>
            <h5><span class="highlight-primary">1.</span> Log in to your exchange.</h5>
            <h5><span class="highlight-primary">2.</span> Make an EOS transfer/withdrawal with the following
                settings:</h5>
            <div class="card settings-card">
                <div class="card-block settings-section">
                    <div><strong>AMOUNT:</strong>
                        <mat-form-field class="mt-8 ml-1" style="width: 142px;">
                            <input matInput style="padding-top: 8px;" type="text"
                                   value="{{(1.25 + (ram.ramPriceEOS * (4096/1024))*1.05).toFixed(4)}} EOS" readonly>
                            <a matSuffix class="tooltip tooltip-xs tooltip-right">
                                <fa-icon [icon]="['far', 'clone']" size="lg" class="copy"
                                     (click)="cc((1.25 + (ram.ramPriceEOS * (4096/1024))*1.05).toFixed(4), 'Amount', '')"></fa-icon>
                                <span class="tooltip-content">Copy</span>
                            </a>
                        </mat-form-field>
                    </div>

                    <div><strong>RECIPIENT:</strong>
                        <mat-form-field class="mt-8 ml-1" style="width: 132px;">
                            <input matInput style="padding-top: 8px;" type="text" value="eosriosignup" readonly>
                            <a matSuffix class="tooltip tooltip-xs tooltip-right">
                                <fa-icon [icon]="['far', 'clone']" size="lg" class="copy"
                                     (click)="cc('eosriosignup', 'eosriosignup', '')"></fa-icon>
                                <span class="tooltip-content">Copy</span>
                            </a>
                        </mat-form-field>
                    </div>
                    <div><strong>MEMO:</strong>
                        <mat-form-field class="mt-8 ml-1" style="width: 88%; margin-left: 8px;">
                            <textarea matInput type="text" rows="3" class="highlight" style="font-size: 12px;" value="{{memo}}"
                            readonly></textarea>
                            <mat-hint>ctrl c to copy or &nbsp;
                                    <fa-icon matSuffix [icon]="['far', 'clone']" size="lg" class="copy"
                                         (click)="cc(memo, 'memo', '')"></fa-icon>
                            </mat-hint>
                        </mat-form-field>
                    </div>
                </div>
            </div>
            <h5><span class="highlight-primary">3.</span> After you make the transfer, check <a
                    class="highlight-primary"
                    (click)="openTX(accountname.toLowerCase())"
                    style="cursor: pointer">{{accountname.toLowerCase()}}</a>
                on a blockexplorer. After that, you can login in SimplEOS on the <strong>'IMPORT EXISTING KEY'</strong>
                button</h5>
            <h5 style="border-top: 1px solid; padding-top: 14px;">If your exchange doesn't allow long memos (e.g.
                Binance) or if the transaction fails for any reason <a class="highlight-primary"
                                                                       (click)="relayMethod = true"
                                                                       style="cursor: pointer">click
                    here to try our ALTERNATIVE METHOD</a></h5>
            <!--<h5>Need help? Check our <span class="highlight-primary"><a (click)="openFaq()"> FAQ</a></span> !</h5>-->
        </ng-container>
        <ng-container *ngIf="relayMethod">


            <h4 class="highlight">Some exchanges, like Binance, impose some limitations. But don't
                worry, we came
                up with a solution for those cases!</h4>
            <h4>Just follow the steps below:</h4>
            <h5><span class="highlight-primary">1.</span> Log in to your exchange.</h5>
            <h5><span class="highlight-primary">2.</span> Now you need to setup a refund address (we need to
                refund you the EOS in case something goes wrong!)</h5>
            <div class="card settings-card">
                <div class="card-block settings-section">
                    <h5><span class="highlight-primary">3.</span> Go to the exchange's deposit page and
                        select EOS. There, you will find the exchange's deposit address and a memo used to indentify you
                    </h5>
                    <form [formGroup]="refundForm">
                        <div><strong>Your exchange's deposit address:</strong>
                            <mat-form-field class="mt-8 ml-1" style="width: 142px;">
                                <input #exchangeacc matInput style="padding-top: 8px;" type="text" maxlength="12"
                                       formControlName="account">
                                <mat-hint align="end">{{exchangeacc.value.length}} / 12</mat-hint>
                            </mat-form-field>
                        </div>

                        <div><strong>Exchange's memo:</strong>
                            <mat-form-field class="mt-8 ml-1" style="width: 241px;">
                                <input matInput style="padding-top: 8px;" type="text" formControlName="memo">
                            </mat-form-field>
                        </div>
                    </form>
                </div>
                <div class="card-footer" style="border-top: 0; padding-top: 0;">
                    <button class="btn btn-info-outline" (click)="makeRelayRequest()" [disabled]="!refundForm.valid">
                        Send
                    </button>
                    <span style="font-size: 14px">*If you provide us with a wrong refund address or memo we are not responsible for lost funds in case something goes wrong.</span>
                </div>
            </div>
            <h5 class="error" *ngIf="requestError !== ''">Error: {{requestError}}</h5>
            <ng-container *ngIf="requestValid">
                <h5><span class="highlight-primary">4.</span> All set! Now, make an EOS transfer/withdrawal
                    with the following
                    settings:</h5>
                <div class="card settings-card">
                    <div class="card-block settings-section">
                        <div><strong>AMOUNT:</strong>
                            <mat-form-field class="mt-8" style="width: 142px;">
                                <input matInput style="padding-top: 8px;" type="text"
                                       value="{{(1.25 + (ram.ramPriceEOS * (4096/1024))*1.05).toFixed(4)}} EOS"
                                       readonly>
                                <fa-icon matSuffix [icon]="['far', 'clone']" size="lg" class="copy"
                                         (click)="cc((1.25 + (ram.ramPriceEOS * (4096/1024))*1.05).toFixed(4), 'Amount', '')"></fa-icon>
                            </mat-form-field>
                        </div>

                        <div><strong>RECIPIENT:</strong>
                            <mat-form-field class="mt-8" style="width: 132px;">
                                <input matInput style="padding-top: 8px;" type="text" value="eosrionewacc" readonly>
                                <fa-icon matSuffix [icon]="['far', 'clone']" size="lg" class="copy"
                                         (click)="cc('eosrionewacc', 'eosrionewacc', '')"></fa-icon>
                            </mat-form-field>
                        </div>
                        <div style="color: #a7a7a7;"><strong>MEMO:</strong>
                            <mat-form-field class="mt-8" style="width: 383px; margin-left: 8px;">
          				<textarea matInput type="text" rows="1" class="highlight" style="font-size: 12px;"
                                  value="{{requestId}}"
                                  readonly></textarea>
                                <mat-hint>ctrl c to copy or &nbsp;
                                    <fa-icon matSuffix [icon]="['far', 'clone']" size="lg" class="copy"
                                             (click)="cc(requestId, 'memo', '')"></fa-icon>
                                </mat-hint>
                            </mat-form-field>
                        </div>
                    </div>
                </div>
                <h5><span class="highlight-primary">5.</span> After you make the transfer, check <a
                        class="highlight-primary"
                        (click)="openTX(accountname.toLowerCase())"
                        style="cursor: pointer">{{accountname.toLowerCase()}}</a>
                    on a blockexplorer. After that, you can login in SimplEOS on the <strong>'IMPORT EXISTING
                        KEY'</strong>
                    button</h5>
            </ng-container>
        </ng-container>
    </clr-wizard-page>
</clr-wizard>
<!--CREATE NEW WALLET END-->

<!--GENERATE KEYS-->
<app-keygen-modal></app-keygen-modal>
<!--GENERATE KEYS END-->

<!--IMPORT BACKUP START-->
<clr-modal #importBackupModal [(clrModalOpen)]="importBKP" [clrModalSize]="'md'">
    <h3 class="modal-title">
        Select your backup file:
    </h3>
    <div class="modal-body">
        <form [formGroup]="importForm" (keyup.enter)="importBK()">
            <button type="button" class="btn btn-info-outline" (click)="inputIMClick()" style="margin-left:10px;">
                Select file
            </button>
            <mat-form-field class="mt-8">
                <input matInput #passbackup type="password" placeholder="Password" formControlName="pass">
                <fa-icon matSuffix *ngIf="passbackup.type === 'password'" [icon]="['far', 'eye']" size="lg" class="copy"
                         (click)="passbackup.type = 'text'"></fa-icon>
                <fa-icon matSuffix *ngIf="passbackup.type === 'text'" [icon]="['far', 'eye-slash']" size="lg"
                         class="copy"
                         (click)="passbackup.type = 'password'"></fa-icon>
                <mat-hint align="start">
                    Password that was used to encrypt your file
                </mat-hint>
            </mat-form-field>
            <br/>
            <br/>
            <br/>
            <span class="text-faded">{{choosedFil}}</span>
            <input style="visibility:hidden;" type="file" placeholder="Backup file" (change)="importCheckBK($event)"
                   formControlName="customImportBK" #customImportBK>
        </form>
    </div>
    <div class="modal-footer" style="padding: 0.5rem 0 0 0;">
        <button type="button" class="btn btn-info-outline" (click)="importBK()" [disabled]="!importForm.valid || busy2">
            Import
            <fa-icon [icon]="['far','spinner']" [spin]="true" *ngIf="busy2"></fa-icon>
        </button>
    </div>
</clr-modal>
<!--IMPORT BACKUP END-->

<!--ENDPOINT MODAL-->
<clr-modal #selectEndpointModal [(clrModalOpen)]="endpointModal" [clrModalSize]="'md'">
    <h3 class="modal-title">
        <span class="highlight-primary">Network Options</span>
    </h3>
    <div class="modal-body">
        <!--        <div class="card info-card mat-elevation-z2">-->
        <!--            <div class="card-block">-->
        <div class="info2">Connect to another endpoint.</div>
        <div class="card chains-card">
            <ng-container *ngFor="let ep of network.validEndpoints">
                <div class="card-block chain-section {{network.selectedEP() === ep.url?'selected':''}}"
                     (click)="setEndPoint(ep.url);"
                     *ngIf="ep.latency !== -1">
                    {{ep.url}}
                    <span style="float:right">latency: {{ep.latency}} ms</span>
                </div>
            </ng-container>
        </div>
        <a aria-haspopup="true" class="tooltip tooltip-md tooltip-right">
            <button
                    class="btn btn-info-outline mt-1" (click)="network.connect(true); endpointModal=false;">Auto
            </button>
            <span class="tooltip-content">Automatically connects on the<br> fastest endpoint for you</span>
        </a>

        <div>
            <mat-form-field class="public-input" style="overflow: inherit;">
                <input matInput type="text" placeholder="Endpoint" [(ngModel)]="endpoint">
            </mat-form-field>
            <button class="btn btn-info-outline btn-check" (click)="customConnect()" [disabled]="!endpoint"
                    style="clear: both;">
                Connect
            </button>
        </div>
        <!--            </div>-->
        <!--        </div>-->
    </div>
    <div class="modal-footer" style="padding: 0.5rem 0 0 0;">

    </div>
</clr-modal>
<!--ENDPOINT MODAL END-->
